<template>
	<view class="tabs">
		<view class="tab" v-for="(name, index) in ['阅读历史', '我的书架']" :key="index"
			:class="{ active: val === (index + 1) }" @click="val = index + 1">{{ name }}</view>

		<view class="line" :style="{ '--left': `calc(32rpx + 188rpx * ${val - 1})` }"></view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'

	const props = defineProps({
		modelValue: [String, Number]
	})

	const emit = defineEmits(['update:modelValue'])

	const val = computed({
		get: () => {
			return props.modelValue
		},
		set: (val) => {
			emit('update:modelValue', val)
		}
	})
</script>

<style scoped lang="scss">
	.tabs {
		position: relative;
		padding: 16rpx 0;
		background: #fff;
		@include flex($align: center);

		.tab {
			padding: 16rpx 30rpx;
			@include tx(32rpx);
			color: #9A9697;
			font-weight: 500;
			transition: all 0.4s ease-in-out;

			&.active {
				color: #000;
				font-weight: 600;
			}
		}

		.line {
			position: absolute;
			left: 30rpx;
			bottom: 0;
			@include size(64rpx, 12rpx);
			background: #FD6A13;
			transition: all 0.4s ease-in-out;
			border-radius: 12rpx;
			transform: translateX(var(--left));
			z-index: 1;
		}
	}
</style>